<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			.bar {
				width: 500px;
				margin: 0 auto;
				border: 1px solid gray;
			}
			
			#tabbar {
				list-style: none;
				width: 100%;
				height: 44px;
			}
			
			#tabbar li {
				height: 44px;
				line-height: 44px;
				text-align: center;
				width: 25%;
				border-right: 1px solid gray;
				float: left;
				cursor: pointer;
			}
			
			#tabbar li:last-child {
				border: none;
			}
			
			.active {
				background: gray;
				color: white;
			}
			
			#tab {
				list-style: none;
				width: 100%;
				height: 300px;
				border-top: 1px solid gray;
				position: relative;
			}
			
			#tab li {
				position: absolute;
				left: 0;
				top: 0;
				display: none;
				
			}
			
			.tabactive {
				display: block !important;
			}
			
			#select {
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<div id="bar">

		</div>
		<div id="select">

		</div>

	</body>
	<script type="text/javascript">
		(function(w, doc, undefined) {
			w.selectbar = function(opt) {
				this.div = doc.querySelector(opt.id);
				this.div.setAttribute("class", "bar")
				this.init()
			};
			selectbar.prototype = {
				constructor: selectbar,
				init: function() {
					var $this = this;
					$this.addtabbar();
				},
				barEvent: function() {
					console.log("执行绑定")
					var $this = this;
					var li = $this.div.querySelector("#tabbar").getElementsByTagName("li");
					var litab = $this.div.querySelector("#tab").getElementsByTagName("li")
					for(var i = 0; i < li.length; i++) {
						li[i].index = i;
						li[i].onclick = function() {
							var index = this.index;
							for(var j = 0; j < li.length; j++) {
								li[j].removeAttribute("class", "active");
								litab[j].removeAttribute("class", "active")
							}
							$this.div.querySelector("#tabbar").getElementsByTagName("li")[index].setAttribute("class", "active");
							$this.div.querySelector("#tab").getElementsByTagName("li")[index].setAttribute("class", "tabactive");
						}

					}
				},
				addtabbar: function() {
					console.log("添加选项卡头部内容");
					var $this = this;
					var ul = doc.createElement("ul");
					ul.setAttribute("id", "tabbar");
					var str = "";
					for(var i = 0; i < 4; i++) {
						str += "<li>第" + (i + 1) + "项</li>"
					};
					ul.innerHTML = str;
					$this.div.appendChild(ul);
					$this.div.querySelector("#tabbar").getElementsByTagName("li")[0].setAttribute("class", "active");
					$this.addtable();
				},
				addtable: function() {
					console.log("添加选项卡内容");
					var $this = this;
					var ul = doc.createElement("ul");
					ul.setAttribute("id", "tab");
					var str = "";
					for(var i = 0; i < 4; i++) {
						str += "<li>第" + (i + 1) + "页</li>"
					};
					ul.innerHTML = str;
					$this.div.appendChild(ul);
					$this.div.querySelector("#tab").getElementsByTagName("li")[0].setAttribute("class", "tabactive");
					$this.barEvent()
				}
			}
		}(window, document))
	</script>
	<script type="text/javascript">
		var select = new selectbar({
			id: "#bar",
			text: "1111"
		})
		var select2 = new selectbar({
			id: "#select",
			text: "1111"
		})
	</script>

</html>